<template>
  <div class="dialog">
    <el-dialog
      :visible.sync="ShowDialog"
      :modal-append-to-body="false"
      width="720px"
      @closed="closed"
    >
      <div class="main">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="素材库" name="素材库">
            <div class="img-box">
              <div style="margin-bottom:20px">
                <el-radio-group
                  v-model="radio1"
                  @change="onRadioChange"
                  size="small"
                >
                  <el-radio-button :label="false">全部</el-radio-button>
                  <el-radio-button :label="true">收藏</el-radio-button>
                </el-radio-group>
              </div>
              <!-- 全部素材 -->
              <div
                class="img-group"
                v-if="userImages.results && userImages.results.length >= 1"
              >
                <div class="total-img">
                  <el-row>
                    <el-col
                      :span="4"
                      v-for="(item, index) in userImages.results"
                      :key="index"
                      :class="{ imgCol: index === selectIndex }"
                    >
                      <el-image
                        @click.native="selectImg(item, index)"
                        class="img_item"
                        :src="item.url"
                        fit="cover"
                      ></el-image>
                    </el-col>
                  </el-row>
                </div>
                <div class="pagination">
                  <el-pagination
                    background
                    layout="total,prev, pager, next"
                    :total="pagination.total"
                    :page-size="pagination.pageSize"
                    :current-page="pagination.currentPage"
                    @current-change="handleCurrentChange"
                  >
                  </el-pagination>
                </div>
              </div>
              <div class="empty" v-else>
                暂无数据
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="上传管理" name="上传管理">
            <div class="upload-warp">
              <el-upload
                class="avatar-uploader"
                action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
                :headers="{ Authorization: `Bearer ${token}` }"
                name="image"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="footer" slot="footer">
        <el-button @click="ShowDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmUpload">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getimage } from '@/api/image'
import { getUser } from '../utils/storage'
export default {
  name: 'my-dialog',
  props: {
    imgIndex: {
      type: Number
    }
  },
  data () {
    return {
      ShowDialog: false,
      token: getUser().token,
      // tabs组件绑定的值
      activeName: '素材库',
      // el-radio绑定的值
      radio1: false,
      // 素材图片
      userImages: {},
      // 分页条参数
      pagination: {
        currentPage: 1,
        pageSize: 12,
        total: 10
      },
      // 是否是收藏的图片
      is_collect: false,
      // 图片预览
      imageUrl: '',
      selectIndex: -1,
      // 中介
      middleImg: ''
    }
  },
  methods: {
    // 确定事件
    confirmUpload () {
      if (this.middleImg === '') {
        this.$message.error('请选择图片')
        return
      }
      this.$emit('confirmImg', this.middleImg, this.imgIndex)
      this.ShowDialog = false
    },
    closed () {
      this.selectIndex = -1
    },
    // 选择图片
    selectImg (item, index) {
      this.selectIndex = index
      this.middleImg = item.url
    },
    // 上传成功
    handleAvatarSuccess (res, file) {
      this.imageUrl = res.data.url
      this.middleImg = res.data.url
    },
    // 上传图片前
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 页码改变事件
    handleCurrentChange (page) {
      this.pagination.currentPage = page
      this.getUserImg()
    },
    // tab点击事件
    handleClick (value) {
      this.middleImg = ''
      this.selectIndex = -1
    },
    // 单选框点击事件
    onRadioChange (label) {
      this.is_collect = label
      this.pagination.currentPage = 1
      this.getUserImg()
    },

    // 封装获取用户素材接口
    async getUserImg () {
      const _query = {
        page: this.pagination.currentPage,
        per_page: this.pagination.pageSize,
        collect: this.is_collect
      }
      const res = await getimage(_query)
      this.selectIndex = -1
      this.userImages = res.data
      this.pagination.total = res.data.total_count
    }
  },
  created () {
    this.getUserImg()
  }
}
</script>
<style lang="less">
.dialog {
  .total-img {
    .imgCol {
      position: relative;
      &::after {
        position: absolute;
        left: 0;
        top: 0;
        content: '';
        width: 105px;
        height: 100px;
        display: block;
        background: rgba(0, 0, 0, 0.3) no-repeat url('../assets/selected.png');
        background-position: center;
        background-size: 50px;
      }
    }
    .img_item {
      cursor: pointer;
      position: relative;
      width: 105px;
      height: 100px;
    }
  }
  .empty {
    text-align: center;
    font-size: 30px;
  }
  .pagination {
    text-align: center;
    margin-top: 20px;
  }
  .upload-warp {
    text-align: center;
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
}
</style>
